<template>
<div>
<div>
  <el-card class="box-card" style="padding: 0">
    <div class="clearfix" style="height: 50px;background-color: #2c3e50;border-radius: 5px 5px 0px 0px;padding: 0">
      <span style="color: white;font-size: 25px;margin-left: 20px;line-height: 50px">客户关怀-近10天内过生日客户</span>
    </div>
    <div>
      <!--       将获取到的数据进行计算 表格-->
      <el-table :data="lists.slice((currentPage-1)*PageSize,currentPage*PageSize)" style="width: 100%;" border     :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
        <el-table-column prop="id" label="序号" width="105"></el-table-column>
        <el-table-column prop="name" label="客户姓名"></el-table-column>
        <el-table-column prop="times" label="出生年月"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="doctor" label="主治医生"></el-table-column>
      </el-table>
      <!--        分页-->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="PageSize" layout="prev, pager, next, jumper" :total="totalCount" style="text-align: center"></el-pagination>
    </div>
  </el-card>
</div>

  <div style="margin-top: 40px">
    <el-card class="box-card" style="padding: 0">
      <div class="clearfix" style="height: 50px;background-color: #2c3e50;border-radius: 5px 5px 0px 0px;padding: 0">
        <span style="color: white;font-size: 25px;margin-left: 20px;line-height: 50px">客户关怀-45天以上未回访的客户</span>
      </div>
      <div>
        <!--       将获取到的数据进行计算 表格-->
        <el-table :data="lists2.slice((currentPage2-1)*PageSize2,currentPage2*PageSize2)" style="width: 100%;" border     :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
          <el-table-column prop="id" label="序号" width="105"></el-table-column>
          <el-table-column prop="name" label="客户姓名"></el-table-column>
          <el-table-column prop="content" label="最近回访内容"></el-table-column>
          <el-table-column prop="timess" label="最近回访时间"></el-table-column>
          <el-table-column prop="doctor" label="主治医生"></el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="currentPage2" :page-sizes="pageSizes2" :page-size="PageSize2" layout="prev, pager, next, jumper" :total="totalCount2" style="text-align: center"></el-pagination>
      </div>
    </el-card>
  </div>

  <div style="margin-top: 40px">
    <el-card class="box-card" style="padding: 0">
      <div class="clearfix" style="height: 50px;background-color: #2c3e50;border-radius: 5px 5px 0px 0px;padding: 0">
        <span style="color: white;font-size: 25px;margin-left: 20px;line-height: 50px">	客户关怀-3个月以上未体检的客户</span>
      </div>
      <div>
        <!--       将获取到的数据进行计算 表格-->
        <el-table :data="lists3.slice((currentPage3-1)*PageSize3,currentPage3*PageSize3)" style="width: 100%;" border     :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
          <el-table-column prop="id" label="序号" width="105"></el-table-column>
          <el-table-column prop="name" label="客户姓名"></el-table-column>
          <el-table-column prop="result" label="最近体检内容（结果）"></el-table-column>
          <el-table-column prop="timesss" label="最近体检时间"></el-table-column>
          <el-table-column prop="doctor" label="主治医生"></el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination @size-change="handleSizeChange3" @current-change="handleCurrentChange3" :current-page="currentPage3" :page-sizes="pageSizes3" :page-size="PageSize3" layout="prev, pager, next, jumper" :total="totalCount3" style="text-align: center"></el-pagination>
      </div>
    </el-card>
  </div>

</div>
</template>

<script>
export default {
  name:'',
  data(){
    return {
      lists:{},
      // 默认显示第几页
      currentPage:1,
      // 总条数
      totalCount:1,
      // 个数选择器
      pageSizes:[1,2,3,4],
      // 默认每页显示的条数
      PageSize:2,

      lists2:{},
      // 默认显示第几页
      currentPage2:1,
      // 总条数
      totalCount2:1,
      // 个数选择器
      pageSizes2:[1,2,3,4],
      // 默认每页显示的条数
      PageSize2:2,

      lists3:{},
      // 默认显示第几页
      currentPage3:1,
      // 总条数
      totalCount3:1,
      // 个数选择器
      pageSizes3:[1,2,3,4],
      // 默认每页显示的条数
      PageSize3:2,
    }
  },
  methods:{
    // 后端查询方法
    list(){
      // 运用axios的get方式通过url获取后端数组
      this.$axios.get("/api/customercare1/list").then((res) =>{
        console.log(res);
        // 数组等于res里的数据
        this.lists = res.data.data;
        // 分页总条数的长度等于数组的数据总长度
        this.totalCount=this.lists.length;
      })
    },

    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize=val
      // 在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage=1
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage=val
    },

    // 后端查询方法
    list2(){
      // 运用axios的get方式通过url获取后端数组
      this.$axios.get("/api/customercare2/list").then((res) =>{
        console.log(res);
        // 数组等于res里的数据
        this.lists2 = res.data.data;
        // 分页总条数的长度等于数组的数据总长度
        this.totalCount2=this.lists2.length;
      })
    },

    // 分页
    // 每页显示的条数
    handleSizeChange2(val) {
      // 改变每页显示的条数
      this.PageSize2=val
      // 在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage2=1
    },
    // 显示第几页
    handleCurrentChange2(val) {
      // 改变默认的页数
      this.currentPage2=val
    },

    // 后端查询方法
    list3(){
      // 运用axios的get方式通过url获取后端数组
      this.$axios.get("/api/customercare3/list").then((res) =>{
        console.log(res);
        // 数组等于res里的数据
        this.lists3 = res.data.data;
        // 分页总条数的长度等于数组的数据总长度
        this.totalCount3=this.lists3.length;
      })
    },

    // 分页
    // 每页显示的条数
    handleSizeChange3(val) {
      // 改变每页显示的条数
      this.PageSize3=val
      // 在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage3=1
    },
    // 显示第几页
    handleCurrentChange3(val) {
      // 改变默认的页数
      this.currentPage3=val
    },
    },
  // 获取数组
  created:function(){
    this.list();
    this.list2();
    this.list3();
  }
  }
</script>


<style>
/*卡片顶部样式*/
.el-card__body{
  padding: 0;
}
/deep/.el-table th > .cell {

  text-align: center;

}

/deep/.el-table .cell {

  text-align: center;

}
/*卡片样式*/
.text {
  font-size: 14px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
/deep/.el-card__header{
  padding: 0;
}
</style>



